<template>
    <div class="ChatPage">
        <van-nav-bar title="聊天"  >
            <template #left>
                <van-icon @click="goto" name="arrow-left" color="#999999" size="18" />
            </template>
        </van-nav-bar>
        <div class="list">
            <div class="item" @click="gotoDetailed">
                <div class="img">
                    <van-image class="image" width="48" height="48" src="https://s10.mogucdn.com/mlcdn/c45406/210114_890c21beil0537ge8ji0793l3bhh6_132x132.png_50x50.jpg" />
                    <div class="text">
                    <p>活动消息</p>
                    <span>[活动消息]</span>
                </div>
                </div>

                <div class="time">
                    4小时前
                </div>
            </div>
        </div>
    </div>
</template>
<script>
export default{
    data(){
        return{

        }
    },
    methods:{
        gotoDetailed(){
            this.$router.push('/ChatDetailed')
        },
        goto(){
            this.$router.go(-1)
        }
    }
}

</script>

<style lang="scss" scoped>
.ChatPage{
    background-color: #fff;
    height: 100vmax;
    .van-nav-bar{
        border-bottom: 1px solid #e5e5e5;
    }
    .list{
        background-color: #fff;
        height: 100%;
        .item{
            height: 48px;
            padding: 15px 15px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            border-bottom: 1px solid #e5e5e5;
            .img{
                display: flex;
                align-items: center;
                justify-content: flex-start;
                .image{
                    border-radius: 50%;
                    overflow: hidden;
                }
                .text{
                    margin-left: 10px;
                    p{
                        margin: 0px;
                        font-size: 15px;
                        color: #333;
                    }
                    span{
                        font-size: 12px;
                        color: #999;
                    }
                }
                
            }
            .time{
                font-size: 12px;
                color: #999;
            }
        }
    }
}
</style>